<!-- static/index.html -->
<!DOCTYPE html>
<html>
<head>
    <title>WebSocket Demo</title>
    <style>
        body { font-family: Arial, sans-serif; margin: 20px; }
        #messages { height: 300px; overflow-y: scroll; border: 1px solid #ccc; padding: 10px; }
        #messageForm { margin-top: 10px; }
    </style>
</head>
<body>
    <h1>WebSocket Chat</h1>
    <div id="messages"></div>
    <form id="messageForm">
        <input type="text" id="messageInput" placeholder="Type a message..." autocomplete="off">
        <button type="submit">Send</button>
    </form>

    <script>
        const messages = document.getElementById('messages');
        const messageForm = document.getElementById('messageForm');
        const messageInput = document.getElementById('messageInput');
        
        // 创建WebSocket连接
        const ws = new WebSocket('ws://' + window.location.host + '/ws');
        
        // 连接建立时
        ws.onopen = function() {
            addMessage('Connected to server');
        };
        
        // 接收消息时
        ws.onmessage = function(event) {
            addMessage(event.data);
        };
        
        // 连接关闭时
        ws.onclose = function() {
            addMessage('Disconnected from server');
        };
        
        // 发送消息
        messageForm.addEventListener('submit', function(e) {
            e.preventDefault();
            const message = messageInput.value;
            ws.send(message);
            messageInput.value = '';
        });
        
        // 添加消息到界面
        function addMessage(message) {
            const messageElement = document.createElement('div');
            messageElement.textContent = message;
            messages.appendChild(messageElement);
            messages.scrollTop = messages.scrollHeight;
        }
    </script>
</body>
</html>